<template>
  <view class="container">
    <view v-if="recipe">
      <view class="title">{{ recipe.name }}</view>
      <view v-if="isCustomRecipe && recipe.description" class="desc">{{ recipe.description }}</view>
      <view class="row-info">
        <text class="info">难度：{{ recipe.difficulty }}</text>
        <text class="info"> | </text>
        <text class="info">时间：{{ recipe.timeNeeded }}分钟</text>
      </view>
      <!-- 食材 -->
      <view v-if="isCustomRecipe">
        <view class="section-title">食材：</view>
        <view v-if="recipe.vegetables && recipe.vegetables.length">蔬菜：{{ recipe.vegetables.join('、') }}</view>
        <view v-if="recipe.meats && recipe.meats.length">肉类：{{ recipe.meats.join('、') }}</view>
        <view v-if="recipe.staples && recipe.staples.length">主食：{{ recipe.staples.join('、') }}</view>
      </view>
      <view v-else>
        <view class="section-title">食材：</view>
        <view v-if="recipe.ingredients.vegetables && recipe.ingredients.vegetables.length">蔬菜：{{ recipe.ingredients.vegetables.join('、') }}</view>
        <view v-if="recipe.ingredients.meats && recipe.ingredients.meats.length">肉类：{{ recipe.ingredients.meats.join('、') }}</view>
        <view v-if="recipe.ingredients.staples && recipe.ingredients.staples.length">主食：{{ recipe.ingredients.staples.join('、') }}</view>
      </view>
      <!-- 厨具 -->
      <view class="section-title">厨具：</view>
      <view v-if="isCustomRecipe">{{ recipe.utensil }}</view>
      <view v-else>{{ recipe.utensils && recipe.utensils.join('、') }}</view>
      <!-- 步骤 -->
      <view v-if="isCustomRecipe && recipe.steps && recipe.steps.length">
        <view class="section-title">步骤：</view>
        <view v-for="(step, idx) in recipe.steps" :key="idx" class="step-item">
          <view>步骤{{ idx+1 }}：{{ step }}</view>
          <view v-if="recipe.tips && recipe.tips[idx]" class="tips">小贴士：{{ recipe.tips[idx] }}</view>
        </view>
      </view>
      <view v-else-if="!isCustomRecipe && recipe.steps && recipe.steps.length">
        <view class="section-title">步骤：</view>
        <view v-for="step in recipe.steps" :key="step.step" class="step-item">
          <view>步骤{{ step.step }}：{{ step.description }}</view>
          <view v-if="step.tips" class="tips">小贴士：{{ step.tips }}</view>
        </view>
      </view>
      <!-- 收藏按钮 -->
      <view class="btn-row">
        <button class="fav-btn" :class="{active: isFavorite}" @click="toggleFavorite">
          <text class="fav-icon">{{ isFavorite ? '⭐' : '☆' }}</text>
          <text class="fav-text">{{ isFavorite ? '已收藏' : '收藏' }}</text>
        </button>
      </view>
    </view>
    <view v-else class="placeholder">未找到该菜谱</view>
  </view>
</template>

<script>
import { getAllRecipes } from '@/utils/recipe-util.js'
export default {
  data() {
    return {
      recipe: null,
      isCustomRecipe: false,
      isFavorite: false
    }
  },
  async onLoad(options) {
    const id = options.id
    const all = await getAllRecipes()
    let recipe = all.find(r => r.id === id)
    if (recipe) {
      this.recipe = recipe
      this.isCustomRecipe = !recipe.ingredients
    }
    // 收藏状态
    const fav = uni.getStorageSync('favorite') || []
    this.isFavorite = fav.includes(id)
    // 记录历史
    let history = uni.getStorageSync('history') || []
    if (!history.includes(id)) {
      history.push(id)
      uni.setStorageSync('history', history)
    }
  },
  methods: {
    toggleFavorite() {
      let fav = uni.getStorageSync('favorite') || []
      if (this.isFavorite) {
        fav = fav.filter(i => i !== this.recipe.id)
        this.isFavorite = false
      } else {
        fav.push(this.recipe.id)
        this.isFavorite = true
      }
      uni.setStorageSync('favorite', fav)
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #fff; padding: 24rpx; }
.title { font-size: 24px; font-weight: bold; margin-bottom: 8rpx; }
.desc { font-size: 16px; color: #666; margin-bottom: 8rpx; }
.row-info { display: flex; align-items: center; margin-bottom: 12rpx; }
.info { font-size: 14px; color: #1976d2; margin-right: 4rpx; }
.section-title { font-size: 16px; font-weight: bold; margin: 12rpx 0 4rpx 0; }
.step-item { margin-bottom: 8rpx; }
.tips { color: #ff9800; font-size: 14px; margin-top: 4rpx; }
.btn-row { margin: 24rpx 0; display: flex; justify-content: center; }
.fav-btn {
  width: auto;
  min-width: 180rpx;
  max-width: 80vw;
  height: 68rpx;
  background: linear-gradient(90deg, #90caf9 0%, #64b5f6 100%);
  color: #222;
  font-size: 20px;
  border-radius: 34rpx;
  border: none;
  box-shadow: 0 4rpx 16rpx #b3e5fc88;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  font-weight: bold;
  transition: background 0.2s, box-shadow 0.2s;
  padding: 0 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-btn.active {
  background: linear-gradient(90deg, #ffe082 0%, #ffd54f 100%);
  color: #b28704;
  box-shadow: 0 4rpx 16rpx #ffe08288;
}
.fav-btn:active {
  opacity: 0.85;
}
.fav-icon {
  font-size: 26px;
}
.fav-text {
  font-size: 20px;
  font-weight: bold;
}
.placeholder { color: #bbb; font-size: 16px; text-align: center; margin-top: 40rpx; }
</style> 